<template>
    <van-row class="bottom">
        <van-col span="4" class="col">
            <van-uploader :after-read="afterRead" result-type="file" preview-size="2rem"/>
        </van-col>
        <van-col span="16" class="col">
            <van-field
                v-model="message"
                rows="1"
                :autosize=" { maxHeight: 100, minHeight: 10 }"
                type="textarea"
                placeholder=""
                maxlength="100"
                :border="true"
            />
        </van-col>
        <van-col span="4" class="col">
            <van-button type="primary" size="small" @click="sendClick">发送</van-button>
        </van-col>
    </van-row>
    <div class="placeholder"></div>
</template>

<script setup lang="ts">
import {UploaderFileListItem} from "vant";
import {ref} from "vue";
import {useChatStore} from "../../../store/chat";
import {wsData} from "../../../type/websocket";
import {sendMessage} from "../../../type/websocket";
import {useFriendStore} from "../../../store/friend";
import {useUploadStore} from "../../../store/upload";

// 声明 props
const props = defineProps<{
    friendId: number
    chatId: string
}>()

// 实例化仓库
const uploadStore = useUploadStore()

// 上传图片
const afterRead = async (file: any) => {
    // 此时可以自行将文件上传至服务器
    const url = await uploadStore.UploadImg(file.file as File)
    sendMsg(url)
};

// 发送的消息
const message = ref("")

// 实例化仓库
const chatStore = useChatStore()


const sendClick = () => {
    // 发送聊天数据
    sendMsg(message.value)

    // 清空发送的数据
    message.value = ""
}

// 向服务器发送数据
function sendMsg(msg:string){
    // 处理即将发送给服务器的聊天数据
    const data: wsData<sendMessage> = {
        type: 1,
        data: {
            "friend_id": props.friendId,
            "chat_id": props.chatId,
            "message": msg
        }
    }

    // 发送数据
    chatStore.SendMessage(data)
}
</script>

<style scoped lang="less">
.bottom {
    position: fixed;
    bottom: 0;
    z-index: 999;
    background-color: #ececec;
    padding: 5px;
    width: 100%;

    .col {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.placeholder {
    height: 60px;
}
</style>